@import "common/style/variable.scss";

.user-center{
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 100;
  width: 100%;
  background: $color-background;
  &.slide-enter-active, &.slide-leave-active{
    transition: all 0.3s
  }
  &.slide-enter, &.slide-leave-to{
    transform: translate3d(100%, 0, 0)
  }
  .back{
    position: absolute;
    top: 0;
    left: 6px;
    z-index: 50;
    .icon-back{
      display: block;
      padding: 10px;
      font-size: $font-size-large-x;
      color: $color-theme;
    }
  }
  .logout{
    position: absolute;
    top: 0;
    right: 6px;
    z-index: 50;
    span{
      display: block;
      padding: 13px;
      color: $color-theme;
    }
  }
  .switches-wrapper{
    margin: 10px 0 30px 0
  }
  .play-btn{
    box-sizing: border-box;
    width: 135px;
    padding: 7px 0;
    margin: 0 auto;
    text-align: center;
    border: 1px solid  $color-text-l;
    color: $color-text-l;
    border-radius: 100px;
    font-size: 0;
    .icon-play{
      display: inline-block;
      vertical-align: middle;
      margin-right: 6px;
      font-size: $font-size-medium-x;
    }
    .text{
      display: inline-block;
      vertical-align: middle;
      font-size: $font-size-small;
    }
  }
  .list-wrapper{
    position: absolute;
    top: 110px;
    bottom: 0;
    width: 100%;
    .list-scroll{
      height: 100%;
      overflow: hidden;
      .list-inner{
        padding: 20px 30px
      }

    }
  }
  .user-details-wrapper{
    position: absolute;
    width: 100%;
    left : 0;
    top: 10%;
  }
}











